<template>
  <div
    style="height: 100%; box-sizing: border-box; overflow-x: scroll"
    id="maindic"
  >
    <div
      style="
        background: #192c55;
        color: white;
        width: 150rem;
        display: flex;
        align-items: center;
        height: 8%;
        border: 0.05px solid;
        box-sizing: border-box;
        text-align: center;
        font-size: 0.8rem;
      "
    >
      <p style="width: 2%">序号</p>
      <p style="width: 6%">任务编号</p>
      <p style="width: 20%">任务名称</p>
      <p style="width: 20%">项目名称</p>
      <p style="width: 19%">需求单位</p>
      <p style="width: 6%">开标类型/采购标的</p>
      <p style="width: 4%">采购方式</p>
      <p style="width: 10%">中标单位</p>
      <p style="width: 8%">发布日期</p>
      <p style="width: 5%">最终定标价(元)</p>
    </div>
    <div style="height: 90%; width: 150rem" v-if="tableData.length > 0">
      <div
        class="cellstyle"
        v-for="(item, index) in tableData"
        :key="index"
        :class="index % 2 != 0 ? 'cellstyleeven' : ''"
        @click="rowClicklist(item)"
        style="font-size: 0.8rem"
      >
        <p style="width: 2%">{{ (currentPage - 1) * 10 + index + 1 }}</p>
        <div style="width: 6%" :title="item.tenderCode">
          <p class="">{{ item.tenderCode }}</p>
        </div>
        <div style="width: 20%" :title="item.tenderName">
          <p class="">{{ item.tenderName }}</p>
        </div>
        <div style="width: 20%" :title="item.projectName">
          <p class="">{{ item.projectName }}</p>
        </div>
        <div style="width: 19%" :title="item.orgName">
          <p class="">{{ item.orgName }}</p>
        </div>
        <div style="width: 6%" :title="item.objectname">
          <p class="">{{ item.objectname }}</p>
        </div>
        <div style="width: 4%" :title="item.procname">
          <p class="">{{ item.procname }}</p>
        </div>
        <div style="width: 10%" :title="item.supplierName">
          <p class="">{{ item.supplierName }}</p>
        </div>
        <div style="width: 8%" :title="item.resultpublishdate">
          <p class="">{{ item.resultpublishdate }}</p>
        </div>
        <div style="width: 5%" :title="item.totalPrice">
          <p class="">{{ item.totalPrice }}</p>
        </div>
      </div>
    </div>
    <div
      style="
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      "
      v-else
    >
      暂无数据
    </div>
    <!-- 点击列表显示弹框 -->
    <Dialogback
      :modalVisible="liebiaodianjivisiable"
      :title="liebiaodianjipoptitle"
    >
      <template>
        <div style="width: 98%; height: 97%; margin: 0 auto; display: flex">
          <Szjjdjlbdialog
            :code="dianjiliebiaocode"
            :id="dianjiliebiaoid"
            :obj="rowobj"
            :tendercode="tendercodelast"
          />
        </div>
      </template>
    </Dialogback>
  </div>
</template>

<script>
import Dialogback from "@/components/dialogback.vue";
import Szjjdjlbdialog from "@/components/szjjdjlbdialog.vue";
export default {
  components: { Dialogback, Szjjdjlbdialog },
  props: {
    tableData: Array,
    currentPage: Number,
    headerlist: Array,
  },
  watch: {
    tableData(newVal, oldVal) {
      console.log(newVal, "newVAL");
      // 获取设置了滚动属性的div标签
      const ele = document.getElementById("maindic");
      // 设置滚动的顶点坐标为滚动的总高度
      ele.scrollLeft = 0;
    },
  },
  data() {
    return {
      liebiaodianjivisiable: false,
      liebiaodianjipoptitle: "",
      dianjiliebiaocode: "111",
      dianjiliebiaoid: "",
      rowobj: {},
      tendercodelast: "",
    };
  },
  methods: {
    rowClicklist(row) {
      console.log(row, "rowClicklist");
      this.rowobj = row;
      this.liebiaodianjivisiable = true;
      this.liebiaodianjipoptitle = "采购详情";
      if (row.pageCode.indexOf(",")) {
        let arr = row.pageCode.split(",");
        this.dianjiliebiaocode = arr[arr.length - 1];
      } else {
        this.dianjiliebiaocode = row.pageCode;
      }

      this.dianjiliebiaoid = row.tenderId;
      this.tendercodelast = row.tenderCode;
    },
    closepopup() {
      this.liebiaodianjivisiable = false;
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.cellstyle {
  width: 100%;
  display: flex;
  align-items: center;
  height: 9.6%;
  box-sizing: border-box;
  text-align: center;
  div {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0.25rem;
    box-sizing: border-box;
    p {
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 设置显示的行数 */
      overflow: hidden;
     
    }
  }
}
.cellstyleeven {
  background-color: #e4e8f2;
}
.textchuli {
  // text-align: center; 
  // box-sizing: border-box;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 设置显示的行数 */
  overflow: hidden;
}
</style>
